<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="../admin/authority.jsp" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@include file="headScriptRC.jsp"%>
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/rc/cs51002script.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/share/componentAPI.js"></script>
</head>
<body>
<div class="wrapper">
		<!-- BEGIN Top-Bar -->
		<%@ include file="../fragments/header.jsp"%>
		<!-- END Top-Bar -->

		<div id="detail-area" class="clearfix">
			<!-- BEGIN SIDEMENU -->
			<div class="hidden-xs hidden-sm page-sidebar" id="side-menu-bar">
				<ul class="page-sidebar-menu">					

					<!-- <div id="displaymenu"></div>  -->
					<%@ include file="../admin/menu.jsp" %>

				</ul>
			</div>
		<!-- End Side Menu -->
		
		<div class="col-sm-12 col-xs-12" id="right-side">
			<div id="navigator-bar"><i class="fa fa-home"></i> หน้าหลัก <i class="fa fa-angle-right ml-5 mr-5"></i> รับเงินค่าน้ำ - รายกลุ่ม</div>
			<!-- Start detail-area -->
			<div>
				<div id="page-header" class="clearfix">
					<div>รับเงินค่าน้ำ - รายกลุ่ม</div>
				</div>
				<!-- End form-detail -->
				
				<div class="form-list clearfix" style="margin-bottom:-80px; margin-top:-30px">
							<div class="search-box no-radius">
								<div class="form-group clearfix search-header no-radius">
									<div class="pull-left">ระบุข้อมูลการค้นหา</div>
									<div class="pull-right">
										<div id="hide-button">
											<i class="fa fa-chevron-circle-up"></i>
										</div>
									</div>
								</div>
								<div id="box-body">
									<div class="form-group row mt-20 ">
										<div class="pull-left mt-5 col-md-3">
											<label for="exampleInputEmail1">เขต</label> <select
												class="form-control" id="inputZone">
												<option value="">-- เลือกเขต --</option>
											</select>
										</div>

										<div class="pull-left mt-5 col-md-3">
											<label for="exampleInputEmail1">เส้นทาง</label> <select
												class="form-control" id="inputRoute">
												<option value="">-- เลือกเส้นทาง --</option>
											</select>
										</div>

										<div class="pull-left mt-5 col-md-3">
											<label for="exampleInputEmail1">ประจำเดือน</label>
											<div id="MonthId"></div>
										</div>


										<div class="pull-left mt-5 col-md-3">
											<label for="exampleInputEmail1">ประจำปี</label> 
											<div id="yearId"></div>
										</div>
									</div>
									<div class="form-group mt-20 clearfix search-footer no-radius">
										<div class="col-sm-12 text-center">
											<button type="button" id="btn-seach" class="btn btn-primary">
												<i class="fa fa-search"></i> ค้นหา
											</button>
										</div>
									</div>
								</div>
								<!-- END BOX-BODY-->
							</div>
					</div>
				<div class="form-detail " style="margin-top:-20px;padding-top: 0px;width: 100%;padding-left: 0px;padding-right: 0px">
					<div class="form-list" id="form-list" >
						<form role="form" name="form" action="" method="POST">
							<input type="hidden" id="url_address" name="url_address" value="">
							<input type="hidden" id="agent_browser" name="agent_browser" value="">
							<div class="list-detail-area">						
								<table id="ArDataTable" class="stripe hover cell-border" cellspacing="0" width="100%" align="center">
		        					<thead>
		            					<tr style="background-color: #399bca; color:white; font-size: 0.9em;">
		                					<th style="border-right: 1px solid #999">รับเงิน</th>
											<th style="border-right: 1px solid #999">ลำดับ</th>
											<th style="border-right: 1px solid #999">เลขที่ใบแจ้งหนี้</th>
											<th style="border-right: 1px solid #999">วันที่ออกใบแจ้งหนี้</th>
											<th style="border-right: 1px solid #999">ชื่อ-สกุลผู้ใช้น้ำ</th>
											<th style="border-right: 1px solid #999">ค่าน้ำ</th>
											<th style="border-right: 1px solid #999">ค่าบริการ</th>
											<th style="border-right: 1px solid #999">ภาษี</th>
											<th style="border-right: 1px solid #999">รวมค่าน้ำ</th>
											<th style="border-right: 1px solid #999">รวมทั้งหมด</th>
																			
		            					</tr>
		        					</thead> 						
	    						</table>
							</div>
						</form>
				</div>
				
				<div class="form-group mt-20 clearfix  no-radius">
						<div class="col-sm-12 text-center">
						  <button type="button" id="btn-confirm" class="btn btn-primary"><i class="fa fa-floppy-o"></i> บันทึก</button>
						  <button type="button" id="btn-refreach" class="btn btn-primary"><i class="fa fa-refresh"></i> เริ่มใหม่</button>
						</div>
			 	 </div>
			 	 
			 	 <div>
			 	  	<input type="checkbox" checked="checked" name="TestDataCheck"/>
			 	  	มีการรับชำระเงินเรียบร้อย
			 	 </div>
			 	 
			 	 	<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="successModal" aria-hidden="true">
					    <div class="modal-dialog" style="width: 400px">
					        <div class="modal-content">
					            <div class="modal-header">
					            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					            <h4 class="modal-title">การชำระเงิน</h4>
					            </div>
					            <div class="modal-body">
					            	<div id="modal_content_confirmModal">
					            	<span class="fa-stack fa-lg mr-10" style=" color:#FC0"> <i class="fa fa-exclamation-triangle fa-stack-2x"></i></span>
					            	ยืนยันการชำระเงิน
					            	</div>
					            </div>
					            <div class="modal-footer">
					            	<button type="button" id="btn-save" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-floppy-o"></i> ตกลง</button>
					                <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="glyphicon glyphicon-floppy-remove"></i> ยกเลิก</button>
					        	</div>
					    	</div>
					  	</div>
					</div>
			 	 
			 	 	<div class="modal fade" id="successModal" tabindex="-1" role="dialog" aria-labelledby="successModal" aria-hidden="true">
					    <div class="modal-dialog">
					        <div class="modal-content">
					            <div class="modal-header">
					            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					            <h4 class="modal-title">รับชำระเงินเรียบร้อย</h4>
					            </div>
					            <div class="modal-body">
					            	<div id="modal_content_confirmModal">
					            		 คูณได้ชำระเงินเรียบร้อยแล้วค่ะ
					            	</div>
					            </div>
					            <div class="modal-footer" style="text-align: center">
					                <button type="button" class="btn btn-primary"  data-dismiss="modal">ยกเลิก</button>
					        	</div>
					    	</div>
					  	</div>
					</div>
					
					<div class="modal fade" id="failModal" tabindex="-1" role="dialog" aria-labelledby="successModal" aria-hidden="true">
					    <div class="modal-dialog" style="width: 400px">
					        <div class="modal-content">
					            <div class="modal-header">
					            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					            <h4 class="modal-title">รับชำระเงิน</h4>
					            </div>
					            <div class="modal-body">
					            	<div id="modal_content_confirmModal">
					            	<span class="fa-stack fa-lg mr-10" style="color:#d9534f"> <i class="fa fa-circle fa-stack-2x"></i> <i class="glyphicon glyphicon-remove fa-stack-1x fa-inverse"></i> </span>           	
					            		 ไม่สามารถรับชำระเงินได้
					            	</div>
					            </div>
					            <div class="modal-footer" style="text-align: center">
					                <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="glyphicon glyphicon-ok"></i> ตกลง</button>
					        	</div>
					    	</div>
					  	</div>
					</div>
			 	 
				</div>
		</div>
		<div id="footer-detail">Copyright © สงวนลิขสิทธิ์ พ.ศ.2557 โดย การประปานครหลวง</div>
	</div>
 <!-- End Detail-area-->
</div>
</div>
</body>
</html>